<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			#tab{
				width: 480px;
				margin: 20px auto;
				border: 1px solid red;
				
			}
			#tab ul{
				width: 100%;
				overflow: hidden;
			}
			#tab ul li{
				height: 60px;
				width: 160px;
				float: left;
				line-height: 60px;
				text-align: center;
				background-color: #ccc;
			}
			
			#tab ul li a{
				color: black;
				display: block;
				text-decoration: none;
				width: 100%;
				height: 100%;
				
			}
			
			#tab ul li.active{
				background-color: red;
			}
			#tab p{
				display: none;
				height: 200px;
				text-align: center;
				line-height: 200px;
				background-color: red;
			}
			#tab p.active{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="tab">
			<ul>
				<li class="active">
					<a href="javascript:void(0)">首页</a>
				</li>
				<li>
					<a href="javascript:void(0)">新闻</a>
				</li>
				<li>
					<a href="javascript:void(0)">图片</a>
				</li>
			</ul>
			<p class="active">首页内容</p>
			<p>新闻内容</p>	
			<p>图片</p>
		</div>
		<script type="text/javascript">
			//需求:鼠标放在li上面，li本身变色，对应的p显示出来
			//点亮上面的盒子，利用索引值显示下面的盒子
			
			//在es6中，可以使用let声明块级作用域
			var tabLi = document.getElementsByTagName("li")
			var tabP = document.getElementsByTagName("p")
//			for(var i=0;i<tabLi.length;i++){
//				console.log(i)
//				//将i保存到li标签的对象中
//				tabLi[i].index=i;
//				//i全局作用域，i=3,循环比点击快（块级作用域）
//				tabLi[i].onclick=function(){
//					for (j=0;j<tabLi.length;j++){
//						tabLi[j].className='';
//						tabP[j].className='';
//					}
//					this.className="active";
//					console.log(i)
//					tabP[this.index].className="active";
//				}
//			}
//			
			
			for(let i=0;i<tabLi.length;i++){
				console.log(i)
				//i块级作用域，i
				tabLi[i].onclick=function(){
					for (j=0;j<tabLi.length;j++){
						tabLi[j].className='';
						tabP[j].className='';
					}
					console.log('x='+i);
					this.className="active";
					tabP[i].className="active";
				}
			}
		</script>
	</body>
</html>
